<template>
  <u-popup :show="show" type="center" @close="closePop" :maskClick="false">
    <view class="area-select-popup-wrap">
      <view v-if="regionId" class="iconfont icon-shanchu del" @tap="closePop" />
      <view class="title">选择所属区域</view>
      <view class="area-box">
        <scroll-view style="height: 100%;" scroll-y="true">
          <view
            :class="['name active-btn', regionId === item.id ? 'on' : '']"
            v-for="(item, index) in list"
            :key="index"
            @click="handleSelectArea(item)"
          >
            {{ item.name }}
          </view>
        </scroll-view>
      </view>
      <view class="tip">
        <view>该组织切换是根据您的地址簿上地址生成</view>
        <view class="goto-add-btn" @tap="gotoAddAddress" >新增地址信息</view>
      </view>
    </view>
  </u-popup>
</template>

<script>
import uPopup from '@/basic-components/u-popup/index.vue';

export default {
  components: {
    uPopup,
  },
  props: {
    show: {
      type: Boolean,
      default: false,
    },
    list: {
      type: Array,
      default: () => [],
    },
    regionId: {
      type: Number,
      default: 0,
    },
  },
  async onLoad() {
    console.log(1111);
    if(list.length && list.length===1){
      list.forEach(item => {
        handleSelectArea(item) ;
      });
    }
  },
  methods: {
    closePop() {
      this.$emit('update:show', false);
    },
    handleSelectArea(item) {
      this.$emit('listenSelectArea', item);
    },
    gotoAddAddress() {
      this.$navigate({
        page: 'addressAdd',
      });
    },
  },
};
</script>

<style lang="less">
.area-select-popup-wrap {
  width: 570rpx;
  height: 680rpx;
  padding: 0 34rpx;
  background: #ffffff;
  border-radius: 20px;
  .del {
    position: absolute;
    top: 20rpx;
    right: 30rpx;
    padding: 10rpx;
    font-size: 30rpx;
    color: #999999;
  }
  .title {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 120rpx;
    font-size: 32rpx;
    font-weight: 500;
  }
  .area-box {
    height: 400rpx;
    overflow-y: auto;
  }
  .name {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 120rpx;
    font-size: 32rpx;
    margin-bottom: 20rpx;
    background: #f5f5f5;
    border-radius: 8px;
    &.on {
      background: #fedd00;
    }
  }
  .tip {
    padding-top: 20rpx;
    text-align: center;
    color: #999999;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    .goto-add-btn {
      width: 200rpx;
      height: 60rpx;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      border: 1px solid #fedd00;
      border-radius: 8px;
      margin-top: 10px;
      background-color: #fedd00;
      color: #333;
    }
  }
}
</style>
